<!-- /*
 * @Author: 俞明月
 * @Date:   2022-01-30
 * @Last Modified by:   俞明月
 * @Last Modified time: 2022-01-30
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item">
            <div class="ui-header-arraw prev flex-row align-center" @touchstart.stop @click="handleHistory">
                <i class="icon-back"></i>
            </div>
            <div class="ui-header-title">事项详情</div>
            <div v-if="pageStatus&&$route.query.id" class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleDelete">
                <i class="icon-delete"></i>
            </div>
        </div>
        <div class="ui-mode-content bgwhite flex1 flex-col" ref="scroll">
            <div v-if="pageStatus">
                <van-form validate-first ref="formData" @submit="onSubmit" class="public-from">
                    <van-field
                        class="time-input"
                        readonly
                        v-model="form.time_4_begin"
                        name="time_4_begin"
                        label=""
                        :left-icon="require('@/assets/images/common_clock_blue_icon.png')"
                        placeholder="请选择事件时间 (必填)"
                        :rules="[{ pattern:regular.required, message: '请选择事件时间 (必填)' },]"
                        @touchstart.stop @click=" showDatePicker = true"
                    />
                    <van-field
                        class="title-input"
                        v-model="form.mid_table_remark_001"
                        name="mid_table_remark_001"
                        label=""
                        :left-icon="form.mid_table_remark_001&&form.mid_table_remark_001.length>0?require('@/assets/images/common_list_black_icon.png'):require('@/assets/images/common_list_icon.png')"
                        placeholder="请填写事件内容 (必填)"
                        :rules="[{ pattern:titleValue, message: '请输入完整贴子标题（1-30个字）' },]"
                    />
                    <van-field
                        autosize
                        label=""
                        :left-icon="form.mid_table_remark_002&&form.mid_table_remark_002.length>0?require('@/assets/images/common_remark_black_icon.png'):require('@/assets/images/common_remark_icon.png')"
                        class="ui-message-textarea flex-row"
                        v-model="form.mid_table_remark_002"
                        name="mid_table_remark_002"
                        type="textarea"
                        maxlength="200"
                        placeholder="请填写事件备注(选填)"
                    />
                    <div class="bottom-wrap flex-row align-center">
                        <div v-if="form.mid_table_remark_003==3002" class="bottom-wrap-item flex-row align-center left" @click="submit(3001)">标记为未完成</div>
                        <div v-else class="bottom-wrap-item flex-row align-center left" @click="submit(3002)">标记为已完成</div>
                        <div class="bottom-wrap-item flex-row align-center right" @click="submit(form.mid_table_remark_003?form.mid_table_remark_003:3001)">提交</div>
                    </div>
                </van-form>
            </div>
        </div>
        <transition name="app_dialog">
            <div class="mt-master-container" v-if="showDatePicker" @click="close('showDatePicker')">
                <div class="mt-master-content" @click.stop>
                    <div class="mt-master-wrap">
                        <div class="mt-master-close-wrap flex-row align-center" @click.stop="close('showDatePicker')">
                            <div class="mt-master-close"></div>
                        </div>
                        <div class="mt-master-title">请选择事件时间</div>
                        <div class="mt-master-info">
                            <van-datetime-picker
                                ref='datetPicker'
                                class="public-date-picker"
                                v-model="currentDate"
                                :show-toolbar="showToolbar"
                                type="datetime"
                                title="选择出生日期"
                                :min-date="minDate"
                                :max-date="maxDate"
                                :formatter="formatter"
                                visible-item-count="3"
                                item-heigh="1.84rem"
                                @confirm="submitBirthDay"
                            />
                        </div>
                        <div class="mt-master-btn" @click="submitDatetime">确认</div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
// 引入时间格式化处理函数
import {formatDate} from '@/utils/tool';
import {regular} from '@/utils/validate';
export default {
    name: 'home/public',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            form:{
                mid_table_remark_001:'',
                mid_table_remark_002:'',
                mid_table_remark_003:'',
                mid_table_remark_004:'',
                mid_table_remark_005:'',
                mid_table_remark_006:'',
                mid_table_remark_040:'',
                mid_table_remark_041:'',
                mid_table_remark_042:''
            },
            // 验证正则规则
            regular:regular,
            showDatePicker:false,
            showToolbar:false,
            minDate:new Date(formatDate(new Date(),'YYYY'),0,1),
            maxDate:new Date((Number(formatDate(new Date(),'YYYY'))+1),11,31),
            currentDate:new Date(),
            titleValue:/^.{1,30}$/,
            submitType:'',
            formatter:(type,val) => {
                if(type==='year'){
                    return val+'年';
                }
                if(type==='month') {
                    return val+'月';
                }
                if(type==='day') {
                    return val + '日';
                }
                if(type==='hour') {
                    return val+'时';
                }
                if(type==='minute') {
                    return val+'分';
                }
                return val;
            }
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest,
    ],
    components:{
    },
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init); 
            },
            immediate:true
        },
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            if(this.$route.query.id){
                this.getShopInfo().then(()=>{
                    this.getPageInfo({
                        name:'common.collect',
                        param:{
                            invoke_method:'public_load_middle_table_list',
                            pre_db_para_middle_table_name:'public_middle_table_lite_mod_todo_list',
                            type_middle_app:71001,
                            type_inner_app:1001,
                            pre_db_para_begin_idx:0,
                            pre_db_para_length_4_list:1,
                            is_online:0,
                            id_public_middle_table:this.$route.query.id
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result,response})=>{
                        if(result&&result.page_content&&result.page_content[0]){
                            result.page_content[0].time_4_begin=formatDate(new Date(result.page_content[0].time_4_begin.replace(/-/g,"/")),'MM-DD hh:mm');
                            console.log(result.page_content[0].time_4_begin)
                            this.form=result.page_content[0];
                        }else{
                            return this.showMessage('此待办事项已删除').then(() => {
                                this.handleHistory();
                            });
                        }
                    }).catch(({msg,status})=>{
                        this.showMessage(msg);
                    });
                })
            } else {
                this.getPageInfo({
                    name:'my',
                    param:{
                        invoke_method:'user_and_shop_info'
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                    document.title=this.public_agent_info.application_name;
                    this.setState({
                        key:'public_agent_info',
                        value:this.public_agent_info
                    });
                    this.setState({
                        key:'public_user_info',
                        value:this.public_user_info
                    });
                }).catch(({msg,status})=>{
                    this.showMessage(msg);
                });
            }
        },
        // 获取门店信息
        getShopInfo(){
            return new Promise((resolve, reject) => {
                this.$http.post({
                    name: 'common.shop.info',
                    data: {
                        invoke_method: 'user_and_shop_info'
                    },
                    loading: {
                        enabled: false
                    }
                }).then(({ result, response }) => {
                    this.public_agent_info = result.public_agent_info || {};
                    this.public_user_info = result.public_user_info || {};
                    this.setState({
                        key: 'public_agent_info',
                        value: this.public_agent_info
                    });
                    this.setState({
                        key: 'public_user_info',
                        value: this.public_user_info
                    });
                    resolve({ result, response });
                }).catch(({ msg }) => {
                    reject({ msg });
                });
            });
        },
        // 确认选择时间
        submitDatetime(){
            this.form.time_4_begin=formatDate(this.currentDate,'MM-DD hh:mm');
            this.close('showDatePicker');
        },
        // 请求失败刷新
        handleRefresh(){
            this.init();
        },
        // 点击提交
        submit(val){
            this.submitType=val;
            this.$refs.formData.submit();
        },
        // 处理表单结果函数
        onSubmit(){
            this.$http.post({
                name:'common.collect',
                data:{
                    invoke_method:'public_insert_or_update_middle_table',
                    pre_db_para_middle_table_name:'public_middle_table_lite_mod_todo_list',
                    pre_db_para_id_public_middle_table:this.$route.query.id?this.$route.query.id:'',
                    mid_table_remark_001:this.form.mid_table_remark_001,
                    mid_table_remark_002:this.form.mid_table_remark_002,
                    mid_table_remark_003:this.submitType,
                    mid_table_remark_004:this.public_user_info.nick_name,
                    mid_table_remark_005:this.public_user_info.user_phone,
                    mid_table_remark_006:this.public_user_info.weichat_img,
                    mid_table_remark_040:(formatDate(new Date(this.currentDate),'YYYY-MM-DD')).replace(/-/g,""),
                    mid_table_remark_041:(formatDate(new Date(this.currentDate),'YYYY-MM')).replace(/-/g,""),
                    mid_table_remark_042:(formatDate(new Date(this.currentDate),'YYYY')),
                    id_public_user_info:this.public_user_info.id_public_user_info,
                    time_4_begin:formatDate(this.currentDate,'YYYY-MM-DD hh:mm:ss'),
                    type_middle_app:71001,
                    type_inner_app:1001,
                    is_online:0,
                },
                loading:{
                    enabled:true
                }
            }).then(({result,response})=>{
                return this.showMessage(this.$route.query.id?'保存成功':'新增成功').then(()=>{
                    this.handleHistory();
                });
            }).catch(({msg})=>{
                this.showMessage(msg,false);
            });
        },
        // 关闭弹窗
        close(key){
            this[key]=false;
        },
        // 删除数据
        handleDelete(){
            this.$$confirm({
                content:'删除之后将无法恢复，是否确认删除此待办事项',
                sureText:'确认',
                cancelText:'取消',
                autoClose:true,
                sure:(node,close)=>{
                    // 确认之后的操作
                    this.$http.post({
                        name:'common.collect',
                        data:{
                            invoke_method:'public_insert_or_update_middle_table',
                            pre_db_para_middle_table_name:'public_middle_table_lite_mod_todo_list',
                            pre_db_para_id_public_middle_table:this.$route.query.id,
                            type_middle_app:71001,
                            type_inner_app:1001,
                            is_online:111,
                        },
                        loading:{
                            enabled:true
                        }
                    }).then(({result,response})=>{
                        return this.showMessage('删除成功').then(()=>{
                            this.handleHistory();
                        });
                    }).catch(({msg})=>{
                        this.showMessage(msg,false);
                    });
                },
                cancel:()=>{
                    // 取消之后的操作
                },
                close:()=>{
                    // 关闭回调
                }
            });
        }
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.ui-mode-container{
    background-color:#F6F7FB;
    .bgwhite{
        margin-top:.27rem;
        background:#FFF;
    }
}
.bottom-wrap{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:1.7rem;
    width:18.3rem;
    height:2.34rem;
    border-radius:1.17rem;
    color:#FFF;
    font-size:.9rem;
    font-weight:bolder;
    background:rgba(0, 120, 212, .85);
    box-shadow: 0px 7px 22px 2px rgba(0,70,124,0.3);
    .bottom-wrap-item{
        position:relative;
        width:50%;
        height:100%;
        text-align:center;
        &.left::after{
            content:'';
            position:absolute;
            top:50%;
            right:0;
            transform:translateY(-50%);
            display:block;
            width:.02rem;
            height:.85rem;
            background:#FFF;
        }
    }
}
.mt-master-container{
    position:fixed;
    z-index:11;
    background-color:rgba(0,0,0,0.5);
    left:50%;
    width:100%;
    max-width:20rem;
    top:0;
    bottom:0;
    transform:translateX(-50%);
    .mt-master-content{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        z-index:12;
        line-height:1.2em;
        text-align:center;
        font-size:.58rem;
        color:#222;
        background:#fff;
        border-radius:.53rem .53rem 0 0;
        .mt-master-close-wrap{
            padding:.64rem 0;
            .mt-master-close{
                width:2.13rem;
                height:.21rem;
                background: #ECECEC;
                border-radius:.11rem;
            }
            
        }
        .mt-master-title{
            margin-bottom:.45rem;
            padding-left:.85rem;
            height:1.33rem;
            font-size:.96rem;
            text-align:left;
            color:#222;
            line-height:1.33rem;
        }
        .mt-master-btn{
            margin:.85rem;
            width:18.3rem;
            height:2.67rem;
            background:#0078D4;
            border-radius:1.36rem;
            font-size:.9rem;
            font-weight:bolder;
            color:#FFF;
            line-height:2.67rem;
        }
        
    }
    &.app_dialog-enter-active,&.app_dialog-leave-active{
        transition:all ease-out 0.3s;
		.mt-master-content{
			transition:all ease-out 0.3s;
		}
    }
    &.app_dialog-enter{
        opacity: 0;
		.mt-master-content{
			opacity: 0;
			transform: translateY(0%);
		}
    }
    &.app_dialog-enter-to,.app_dialog-leave{
        opacity: 1;
		.mt-master-content{
			opacity: 1;
			transform: translateY(0%);
		}
    }
    &.app_dialog-leave-to{
        opacity: 0;
		.mt-master-content{
			opacity: 0;
			transform: translateY(0%);
		}
    }
}
</style>
<style lang="less">
.public-from{
    .time-input,.title-input{
        padding:.96rem .85rem;
        .van-field__left-icon{
            margin-right:.43rem;
            .van-icon__image{
                width:.85rem;
                height:.85rem;
            }
        }
    }
    .time-input .van-field__body .van-field__control{
        font-size:.75rem;
        font-weight:bolder;
        color:#0078D4;
        line-height:1.2em;
    }
    .title-input .van-field__body .van-field__control{
        font-size:.75rem;
        font-weight:bolder;
        color:#222;
        line-height:1.2em;
    }
    .time-input .van-field__body .van-field__control::placeholder{
        font-size:.75rem;
        font-weight:bolder;
        color:#0078D4;
        line-height:1.2em;
    }
    .ui-message-textarea{
        margin-bottom:5.2rem;
        padding:.96rem .85rem;
        &::after{
            display:none;
        }
        .van-field__value{
            .van-field__body{
                border:none;
                padding-right:0;
                .van-field__control{
                    padding:0;
                    max-height:150rem;
                    font-size:.75rem;
                    line-height:1.5em;
                    text-align:left;
                    color:#222;
                    &::placeholder{
                        color:#C7C6C9;
                        white-space:nowrap;
                        overflow:hidden;
                    }
                }
            }
        }
    }
}
.public-date-picker{
    line-height:1.84rem;
}
</style>